<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>公告信息</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/all.css" />
</head>
<body class="news">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->
	<span class="layui-breadcrumb">
		<a>公告信息</a>
		<a><cite>公告信息</cite></a>
	</span>
	<div class="layui-tab layui-tab-brief">
		<ul class="layui-tab-title">
			<li class="layui-this">全部</li>
			<!--<li>未读</li>-->
		</ul>
		<div class="layui-tab-content" style="min-height: 100px;">
			<div class="layui-tab-item layui-show allnews">
				<div class="layui-collapse" lay-accordion="">
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">							
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
								删除
							</button>							
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/checked.png" />系统消息1</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/uncheck.png" />恭喜你账号认证通过。。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/checked.png" />您发送的订单已结束评价请处置。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/uncheck.png" />系统消息</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/uncheck.png" />恭喜你账号认证通过。。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<i class="infor-time">发布时间：2018.01.01</i>
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title"><img src="assets/img/uncheck.png" />您发送的订单已结束评价请处置。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
				</div>
				<div id="inforPageAll"></div>
				<div class="layui-btn-group" style="margin:10px 0">
					<button id="checkbox-all" class="layui-btn layui-btn-sm">全选</button>
					<button id="checkbox-reverse" class="layui-btn layui-btn-sm">反选</button>
					<button id="del-all" class="layui-btn layui-btn-sm layui-btn-danger news-del-btn">删除</button>
				</div>
			</div>
			<!--<div class="layui-tab-item unseenews">
				<div class="layui-collapse" lay-accordion="">
					<div class="layui-colla-item">
						<div class="layui-btn-group"
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">系统消息2</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm">
											     编辑
											  </button>
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">恭喜你账号认证通过。。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm">
											     编辑
											  </button>
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">您发送的订单已结束评价请处置。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm">
											     编辑
											  </button>
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">系统消息</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm">
											     编辑
											  </button>
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">恭喜你账号认证通过。。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
					<div class="layui-colla-item">
						<div class="layui-btn-group">
							<button class="layui-btn layui-btn-sm">
											     编辑
											  </button>
							<button class="layui-btn layui-btn-sm  layui-btn-danger news-del-btn">
											    删除
											  </button>
						</div>
						<input class="choose-btn" type="checkbox" name="news" lay-skin="primary" title="写作">
						<h2 class="layui-colla-title">您发送的订单已结束评价请处置。。。</h2>
						<div class="layui-colla-content">
							<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
								<br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
						</div>
					</div>
				</div>
				<div id="inforPageUn"></div>
				<div class="layui-btn-group" style="margin:10px 0">
					<button id="checkbox-all" class="layui-btn layui-btn-sm">全选</button>
					<button id="checkbox-reverse" class="layui-btn layui-btn-sm">反选</button>
					<button id="del-all" class="layui-btn layui-btn-sm layui-btn-danger news-del-btn">删除</button>
				</div>
			</div>-->
		</div>
	</div>
	<div class="layui-btn-group add-news">
		<button class="layui-btn layui-btn-primary">
			<i class="layui-icon">&#xe654;</i>发布新公告
		</button>
	</div>
	<script src="assets/layui/layui.js"></script>
	<script src="assets/js/all.js"></script>
	<script type="text/javascript">
		layui.use(['laypage','layer','form'],function(){
			var laypage = layui.laypage,
				layer = layui.layer,
				form = layui.form,
				$ = layui.$
			//公告信息页面js
			//删除本消息
			$(".news .news-del-btn").on('click', function() {
				var zhi = $(this).parents(".layui-colla-item");
				layer.confirm('确定删除此条公告吗？', function(index) {
					zhi.remove();
					layer.close(index);
				});
			});
		
			//全选
			$('.news #checkbox-all').on('click', function() {
				$(this).parents(".layui-tab-item").find("input[type='checkbox']").prop("checked", true);
				form.render('checkbox');
			});
			//反选
			$('.news #checkbox-reverse').on('click', function() {
				$(this).parents(".layui-tab-item").find("input[type='checkbox']").prop("checked", function(index, attr) {
					return !attr;
				});
				form.render('checkbox');
			});
			//删除选中的
			$(".news #del-all").on('click', function() {
				var theParent = $(this).parents(".layui-tab-item");
				layer.confirm('确定删除所选公告吗？', function(index) {
					theParent.find("input[type='checkbox']:checked").parent(".layui-colla-item").remove();
					layer.close(index);
				});
			});
			//发布新公告
			$(".news .add-news").on('click', function() {
				var index = layer.open({
					type: 2,
					title: '公告内容编辑',
					fixed: false, //不固定
					maxmin: true,
					area: ['620px', '540px'], //宽高
					content: 'addNews.html'
				});
				layer.full(index);
			});
		
			
			//页码全部
			laypage.render({
			    elem: 'inforPageAll'
			    ,count: 100
			    ,groups: 3
			    ,limit: 10
			    ,layout: ['count', 'prev', 'page', 'next','skip']
			    ,jump: function(obj){
			      //alert(obj.limit);//获取到每页显示的条数
			      $.ajax({//异步请求返回给后台
			    	  url:'',
			    	  type:'post',
			    	  data:{'limit':obj.limit},
			    	  dataType:'json',
			    	  success:function(data){
			    		  //这里获取到数据执行显示
			    	  }
			      });
			    }
			});
			//页码待查看
			laypage.render({
			    elem: 'inforPageUn'
			    ,count: 100
			    ,groups: 3
			    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
			    ,jump: function(obj){
			      //alert(obj.limit);//获取到每页显示的条数
			      $.ajax({//异步请求返回给后台
			    	  url:'',
			    	  type:'post',
			    	  data:{'limit':obj.limit},
			    	  dataType:'json',
			    	  success:function(data){
			    		  //这里获取到数据执行显示
			    	  }
			      });
			    }
			});

		})
	</script>
</body>
</html>